<template>
<view class="">
	<uni-search-bar
		v-model="searchForm.sFindValue"
		placeholder="请输入款号"
		@confirm="search"
		@cancel="cancel"
	></uni-search-bar>

	<view class="date-box" v-if="showDate">
		<uni-datetime-picker
			v-model="range"
			type="daterange"
			start-placeholder="下单开始日期"
			end-placeholder="下单结束日期"
			@change="maskClick" 
		/>
	</view>
	
	<view class="fav">
		<uni-fav :star="false" @click="onClick" bgColorChecked="#000" :checked="checked" :contentText="{contentDefault: '表格',contentFav: '表格'}" />
		<uni-fav :star="false" @click="onClick" bgColorChecked="#000" :checked="!checked" :contentText="{contentDefault: '列表',contentFav: '列表'}" />
	</view>
	
	<view class="table" v-if="checked">
		<uni-table border stripe emptyText="暂无更多数据" >
			<uni-tr>
				<uni-th align="center" width="90" v-for="item in captionList">{{ item.sCaption }}</uni-th>
			</uni-tr>
			<uni-tr v-for="(col, index) in list"  @click="editNum(col, index)">
				<uni-td align="center" v-for="item in captionList"> {{ col[item.sKey] }} </uni-td>
			</uni-tr>
			
			<uni-tr v-if="list.length > 0">
				<uni-td align="center" v-for="item in captionList">
					{{ totalList[0][item.sKey] }}
				</uni-td>
			</uni-tr>
		</uni-table>
	</view>
	
	<view class="table" v-else>
		<view class="table-item" v-for="item in list">
			<view class="caption-box">
				<view class="caption-item" v-for="col in captionList">
					<view class="name">{{ col.sCaption }}：</view>
					<view class="">{{ item[col.sKey] }}</view>
				</view>
			</view>
		</view>
	</view>
</view>
</template>

<script>
	import { sum } from "lodash";
	import fabricService from "@/api/auth/fabricService";
	export default {
		data() {
			return {
				searchForm: {
					sTypeCode: "",
					sFindValue: "",
					dFindBegin: "",
					dFindEnd: ""
				},
				list: [],
				checked: true,
				captionList: [],
				totalList: [],
				showDate: false,
				range: [],
			}
		},
		onLoad(option) {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('sendData', (data) => {
				uni.setNavigationBarTitle({
					title: data.sTypeName
				});
				this.showDate = data.sPalletCaption.indexOf("dFindBegin") === -1 ? false : true;
				this.searchForm.sTypeCode = data.sTypeCode
				const params = {
					type: data.sTypeCode
				};
				fabricService.getCardCaptionList(params).then(res => {
					this.captionList = res;
					console.log(this.captionList)
				})
			});
		},
		methods: {
			search() {
				this.list = [];
				if (this.searchForm.sFindValue.trim() === '') {
					uni.showToast({
						title: "请输入款号"
					})
					return false;
				}
				uni.showLoading();
				fabricService.padGetDate(this.searchForm).then(res => {
					uni.hideLoading();
					if (res.length === 0) {
						uni.showToast({
							title: "无数据",
							icon: "error"
						})
						return false
					}
					this.list = res;
					const tList = [];
					const obj = {};
					console.log(this.captionList)
					this.captionList.forEach(cap => {
						if (cap.sKey.slice(0, 1) === 'i' || cap.sKey.slice(0, 1) === 'n') {
							const sumNuM = sum(this.list.map(item => Number(item[cap.sKey]) || 0));
							obj[cap.sKey] = sumNuM;
						} else {
							obj[cap.sKey] = '';
						}
					})
					console.log(this.captionList)
					tList.push(obj);
					this.totalList = tList;
				})
			},
			cancel() {
				this.searchForm.sFindValue = "";
			},
			maskClick(e){
				this.searchForm.dFindBegin = e[0];
				this.searchForm.dFindEnd = e[1];
			},
			onClick() {
				this.checked = !this.checked;
			}
		}
	}
</script>

<style scoped lang="scss">
.date-box {
	padding: 0 20rpx 20rpx 20rpx;
}
.table {
	width: 710rpx;
	margin: 0 auto;
	border-radius: 20rpx;
	font-size: 12px;
	.table-item {
		min-height: 100rpx;
		background-color:  rgb(240, 240, 240);
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		.caption-box {
			display: flex;
			flex-wrap: wrap;
			.caption-item {
				width: 50%;
				display: flex;
				align-items: center;
				margin-top: 8rpx;
			}
			.caption-item-100 {
				width: 100%;
				display: flex;
				align-items: center;
				margin-top: 10rpx;
			}
		}
	}
}
.fav {
	display: flex;
	margin-bottom: 20rpx;
	justify-content: flex-end;
}
</style>